<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <button id="btn01">点一下</button>
    <ul id="list1">
        <li id="l1">QQQ</li>
        <li id="l2">SSS</li>
        <li id="l3">GGG</li>
    </ul>
    <ul id="list2">
        <li>XXX</li>
    </ul>
    <script>
        /* 
            使用cloneNode()方法对节点进行复制的时候,他会复制节点的所有特点,包括各种属性
            这个方法默认只会复制当前节点,而不会复制节点的子节点
            有一个参数,默认情况下是false,意思就是不会将该元素的子节点一起赋值.
        */
    //   实现按钮,将id为l1的元素添加到list2中
        // 获取各个元素
        const l1  = document.getElementById("l1")  
        const list2  = document.getElementById("list2")
        const btn1 = document.getElementById("btn01")
        btn1.addEventListener("click",function(){
            // 将l1这个元素移动到list2的列表中.
            // list2.appendChild(l1)
            const newl1  = l1.cloneNode(true)
            // 因为他是全部复制包括ID,会导致ID重复,我们可以给他设置个新ID
            newl1.id = "newl1"
            list2.appendChild(newl1)
        })
    </script>
</body>
</html>